import { useState } from "react";
import { connect, Link, history } from 'umi';
import { Tabs, Space, Dropdown, Menu, Input, Skeleton ,Modal ,message} from 'antd';
import { RightOutlined, MoreOutlined, ArrowLeftOutlined } from '@ant-design/icons'
import styles from './style.less';
import { useEffect } from "react";
import Detail from './component/Detail'
import { getDetail, pageProd ,updateIsArchived,deleteProd} from '@/services/project/prod'
import { ProdStatus } from '../index'
import DevPage from '@/pages/projects/components/ProjectDev/DevPage'
import QaPage from '@/pages/projects/components/ProjectQA/QaPage'
import BugPage from '@/pages/projects/components/ProjectBug/BugPage'
import TaskPage from '@/pages/projects/components/ProjectTask/TaskPage'
import TaskGantt from '@/pages/projects/components/ProjectTask/TaskGantt'
import ActionDropdown from '@/components/ActionDropdown';
import TextButton from '@/components/TextButton';
const { Search } = Input;
const { TabPane } = Tabs;



const ProdDetail = (props) => {

    const {
        projectId,
        routeTabKey,
        prodId,
        dispatch,
        projectPermission
    } = props

    const [tabKey, setTabKey] = useState()
    const [showList, setShowList] = useState([])
    const [isProjectCollapse, setIsProjectCollapse] = useState(false);
    const [prodDetail, setProdDetail] = useState()
    const [permission, setPermission] = useState({})

    useEffect(() => {
        if (projectId && prodId) {
            getDetail(projectId, prodId).then((result) => {
                setProdDetail(result?.data)
            })
        }
    }, [projectId])

    useEffect(() => {
        setPermission({
            ...projectPermission?.prod
        })
    }, [projectPermission])

    useEffect(() => {
        setTabKey(routeTabKey)
    }, [routeTabKey])


    if (!prodDetail || prodDetail.id !== prodId) {
        return <div className={styles.prodDetail}><Skeleton></Skeleton></div>
    }

    const queryProdPage = () => {
        pageProd(projectId, {
            inStatus: [1, 2, 3]
        }).then(({ data }) => {
            setShowList(data?.list)
        })
    }

    const onSelectProject = (item) => {
        history.push(`/projects/${projectId}/prod/${item.key}`)
        setIsProjectCollapse(false)
    }

    const updatItemIsArchived = (isArchived) => {
        let title = ""
        if (isArchived === 1) {
            title = '确认归档，归档之后无法编辑，只能在归档列表中显示'
        } else {
            title = "确认撤销归档"
        }
        Modal.confirm({
            title: title,
            okText: '确认',
            cancelText: '取消',
            closable: true,
            onOk: (v) => {
                updateIsArchived(projectId, prodId, isArchived)
                    .then(result => {
                        if (result?.success) {
                            message.success("操作成功")
                            setProdDetail({
                                ...prodDetail,
                                isArchived: isArchived
                            })
                        } else {
                            message.success(result?.errMsg)
                        }
                    })
                return Promise.resolve()
            }
        });
    }

    const deleteItem = () => {
        Modal.confirm({
            title: '确认删除，删除之后将无法恢复',
            okText: '确认',
            cancelText: '取消',
            closable: true,
            onOk: (v) => {
                deleteProd(projectId, prodId)
                    .then(result => {
                        if (result?.success) {
                            message.success("操作成功")
                            history.push(`/projects/${projectId}/prod`)
                        } else {
                            message.success(result?.errMsg)
                        }
                    })
                return Promise.resolve()
            }
        });
    }

    const menu = (
        <Menu>
            <Menu.Item ><Search placeholder="项目名"
                onSearch={(name) => {

                }} /></Menu.Item>
            <Menu.Divider />
            {showList?.map((item) => {
                return <Menu.Item key={item.id} onClick={onSelectProject}>
                    <Space>
                        <ProdStatus status={item.status}>
                        </ProdStatus>
                        <div className={styles.menuProjectName}>
                            {item.name}
                        </div>
                    </Space>
                </Menu.Item>
            })}
            <Menu.Divider />
            <Menu.Item icon={<MoreOutlined />}>
                <Link to={`/projects/${projectId}/prod`}>所有迭代</Link>
            </Menu.Item>
        </Menu>
    );

    const leftEntra = (
        <Space className={styles.prodNameSpace}>
            <ArrowLeftOutlined onClick={() => history.go(-1)} />
            <div className={styles.prodName}>{prodDetail.name}</div>
            <Dropdown
                trigger="click"
                placement="bottomCenter"
                onVisibleChange={(flag) => {
                    setIsProjectCollapse(flag)
                }}
                visible={isProjectCollapse}
                arrow
                overlay={menu}>
                <RightOutlined onClick={() => {
                    setIsProjectCollapse(!isProjectCollapse)
                    if (!isProjectCollapse) {
                        queryProdPage()
                    }
                }} rotate={isProjectCollapse ? 90 : 0} />
            </Dropdown>
        </Space>
    );
    const rightEntra = (<>
        <ActionDropdown
            key="action"
            className={styles.actionDropdown}
            placement="bottomLeft"
            actions={[
                prodDetail?.isArchived === 0 ?
                    <TextButton key="archive" type="warning" onClick={() => {
                        updatItemIsArchived(1)
                    }}>归档</TextButton> :
                    <TextButton key="archive" type="warning" onClick={() => {
                        updatItemIsArchived(0)
                    }}>撤销归档</TextButton>
                ,
                <TextButton key="delete" type="danger" onClick={() => {
                    deleteItem()
                }}>删除</TextButton>]}
        />
    </>)

    const onChangeTabSwitch = (tabKey) => {
        history.replace(`/projects/${projectId}/prod/${prodId}/${tabKey}`)
    }
    console.log(prodDetail)
    return <>
        <div className={styles.prodDetail}>
            <Tabs
                activeKey={tabKey}
                tabBarGutter={-8}
                tabBarExtraContent={{
                    left: leftEntra,
                    right: rightEntra
                }}

                onChange={onChangeTabSwitch}
            >
                <TabPane tab="详情" key="detail">
                    <Detail data={prodDetail} projectPermission={projectPermission}></Detail>
                </TabPane>
                <TabPane tab="开发项" key="dev">
                    <DevPage projectId={projectId} projectPermission={projectPermission} queryInitParams={{
                        projectProdItemId: prodDetail.id
                    }}></DevPage>
                </TabPane>
                <TabPane tab="测试项" key="qa">
                    <QaPage projectId={projectId} projectPermission={projectPermission} showProdColumn={false} queryInitParams={{
                        projectProdItemId: prodDetail.id
                    }}></QaPage>
                </TabPane>
                <TabPane tab="任务" key="task">
                    <TaskPage projectId={projectId} projectPermission={projectPermission} queryInitParams={{
                        wrapProjectProdItemId: prodDetail.id
                    }} showItemColumn={false} ></TaskPage>
                </TabPane>
                <TabPane tab="甘特图" key="gantt">
                    <TaskGantt projectId={projectId}
                        title={`${prodDetail.name} 的甘特图`}
                        description={prodDetail.description}
                        projectProdId={prodDetail.id}
                        queryInitParams={{
                            wrapProjectProdItemId: prodDetail.id
                        }}></TaskGantt>
                </TabPane>
                <TabPane tab="BUG" key="bug">
                    <BugPage projectId={projectId} projectPermission={projectPermission} queryInitParams={{
                        wrapProjectProdItemId: prodDetail.id
                    }} ></BugPage>
                </TabPane>
                <TabPane tab="文档" key="doc">
                </TabPane>
            </Tabs>
        </div>

    </>
}


export default connect(({ }) => ({
}))(ProdDetail);